<script setup lang="ts">
/**
 * 页码
 */
const page = defineModel('page', {
  required: true,
  type: Number,
  default: 1,
})

/**
 * 每页数量
 */
const size = defineModel('size', {
  required: true,
  type: Number,
  default: 10,
})

/**
 * 总数量
 */
const total = defineModel('total', {
  required: true,
  type: Number,
  default: 0,
})

const emits = defineEmits(['page-change', 'size-change'])

/**
 * 页码改变
 * @param value
 */
const handlePageChange = (value: number) => {
  emits('page-change', value)
}

/**
 * 每页数量改变
 * @param value
 */
const handleSizeChange = (value: number) => {
  emits('size-change', value)
}
</script>

<template>
  <div class="pagination">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[1, 2, 4, 8, 10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<style scoped lang="less">
.pagination {
  position: fixed;
  left: 220px;
  bottom: 10px;
}
</style>
